docs(ListView): API Decision #2453

saurabhdaware · 2024-12-26T06:14:02Z

Formatted Documents

changeset-bot · 2024-12-26T06:14:06Z

⚠️ No Changeset found

Latest commit: fc5a6bd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-12-26T06:14:18Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2024-12-26T06:17:32Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fc5a6bd:

Sandbox	Source
razorpay/blade: basic	Configuration

rzpcibot · 2024-12-26T06:29:31Z

Bundle Size Report

No bundle size changes detected.

Generated by 🚫 dangerJS against fc5a6bd

…s/rfc

chaitanyadeorukhkar · 2025-01-10T12:19:01Z

packages/blade/src/components/ListView/_decisions/decisions.md

+- Less verbose compared to API without layout component
+
+**Cons:**
+


Is it really a con? Lets check with design if this will ever be needed to move things around within quick filters

Yup it might come in as we discussed earlier on call. Turning 2 individual inputs to InputGroup, moving items to other side, etc might come in future

chaitanyadeorukhkar · 2025-01-10T12:20:16Z

packages/blade/src/components/ListView/_decisions/decisions.md

+## Enhancements / Components
+
+- Enhancements:
+  - Searchable Dropdown


Isnt that just autocomplete? What do we need to do here?

Yup. It's AutoComplete inside DropdownOverlay instead of AutoComplete as trigger for Dropdown.

Something that we can use inside PhoneNumberInput as well to search for countries inside the Dropdown

chaitanyadeorukhkar · 2025-01-10T12:24:26Z

packages/blade/src/components/ListView/_decisions/decisions.md

+
+- Enhancements:
+  - Searchable Dropdown
+  - InputGroup (TBD)


Where is this needed?

It was needed for search but we decided to deprioritise it and do it later

chaitanyadeorukhkar · 2025-01-10T12:25:15Z

packages/blade/src/components/ListView/_decisions/decisions.md

+- Enhancements:
+  - Searchable Dropdown
+  - InputGroup (TBD)
+- New Components


Considering the number of new components and enhancements here, our estimate of 2 weeks seems less. Lets re-evaluate the estimates?

Discussed it earlier in call. Also InputGroup is deprioritised and will be done later.

chaitanyadeorukhkar · 2025-01-10T12:27:21Z

packages/blade/src/components/ListView/_decisions/decisions.md

+</Dropdown>
+```
+
+### FilterChipGroup


There will be different types of filter chips, right? Will this API suffice for all the types?

There are different types of overlays but the trigger of FilterChip itself stays same.

In terms of overlays as well we decided that we'll just stick to DatePicker and Dropdown for now and publish menu later. Although the API itself is flexible enough to support Menu in future when needed

chaitanyadeorukhkar · 2025-01-10T12:28:08Z

packages/blade/src/components/ListView/_decisions/decisions.md

+</Dropdown>
+```
+
+### FilterChipGroup


How is the naming convention on Figma for this? Are we also call this FilterChipGroup & FilterChip?

TODO: make names consistent on figma and dev

anuraghazra · 2025-01-13T10:11:18Z

packages/blade/src/components/ListView/_decisions/decisions.md

+      /* filter on search */
+    }}
+  >
+    <FilterGroup />


What is FilterGroup?

It's FilterChipGroup component. Will be fixed in next commit

anuraghazra · 2025-01-13T10:19:49Z

packages/blade/src/components/ListView/_decisions/decisions.md

+    onSearch={({ value, searchType }) => {
+      /* filter on search */
+    }}


@saurabhdaware I believe we should keep dev side a bit more flexible with slots.

For example in many places in X we don't need search but rather we have some action buttons.

We can keep the QuickFilters and SearchGroup into separate slots which can be independently be used.

<ListView> // internally it will have justify-content: space-between <ListViewQuickFilters filters={[ { title: 'All', onClick: () => {}, }, { title: 'Pending', onClick: () => {}, }, ]} /> <Box> <ListViewFilterToggle /> <ListViewSearchGroup /> </Box> </ListView>

not exactly but something like this ^ this way I can use QuickFilters independently of ListView.

Or

<ListView> // internally it will have justify-content: space-between <ListViewFilters> <QuickFilters filters={[ { title: 'All', onClick: () => {}, }, { title: 'Pending', onClick: () => {}, }, ]} /> <ListViewFiltersActions> // control the gap also <ListViewFilterToggle /> <ListViewSearchGroup /> </ListViewFiltersActions> </ListViewFilters> </ListView>

We discussed it that day. It'll make API a bit verbose and we still want to control the overall layout of this section on DS-side otherwise any change in position of items will require consumer migration. We can control it with some leading trailing type of component like we have in Card but they too will require migration if the terms Leading and Trailing become meaningless with new change.

anuraghazra · 2025-01-13T10:23:50Z

packages/blade/src/components/ListView/_decisions/decisions.md

+```ts
+type QuickFilter = {
+  title: string;
+  onClick: (e: React.MouseEvent) => void;


We will also need onChange, value & controlled/uncontrolled state for QuickFilters.

Because QuickFilters will have the same semantics of RadioGroup it can also change on keyboard events not just click.

Plus this will also be a requirement if we want this to work independently as i've mentioned here

+1. Will change

I'm actually checking if we need multiselect here - https://www.figma.com/design/ZZ2dpcIAsPCEGPwQ2UdgL1?node-id=84-132809&m=dev#1083598127

Otherwise we'll also need some type of quickFilterSelectionType prop as separate thing on ListViewFilters component 🤔

anuraghazra · 2025-01-13T10:33:29Z

packages/blade/src/components/ListView/_decisions/decisions.md

+        onClick: () => {},
+      },
+    ]}
+    onSearchChange={() => {


We need to make sure consumers are able to externally control all aspects of quickfilters/search etc.

Quick filters, search, and dropdowns may be controlled or have initial values set via URL query parameters.

TODO:

Check search feasibility (design @-RK and API)

Check what all might come in trailing of QuickFilters

Search will be optional

Counter, Badge, etc

anuraghazra · 2025-01-13T10:46:36Z

packages/blade/src/components/ListView/_decisions/decisions.md

+<FilterChipGroup>
+  <Dropdown>
+    <FilterChip value={duration} onClearButtonClick={({ value }) => setDuration(undefined)}>
+      Duration
+    </FilterChip>
+    <DropdownOverlay>
+      <ActionList>
+        <ActionListItem
+          title="2 days"
+          value="2d"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 week"
+          value="1w"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 month"


Wouldn’t this get quite cumbersome to write all these JSX even when we just have 2-3 filter chips, not to mention most production apps will have 8-12 chips

Are there any alternatives we can approach? 🤔 Since we already know the specific inputs involved, could we consider a more streamlined, config-driven, and focused API instead?

Will check with RK on where we need freeflowing texts + leading / trailing usage on actionlist

saurabhdaware

Ignore the irrelevant comments. Old comments. I forgot to submit these.

saurabhdaware · 2025-01-14T06:34:49Z

packages/blade/src/components/ListView/_decisions/decisions.md

+        onClick: () => {},
+      },
+    ]}
+    onSearchChange={() => {


TODO:

Check search feasibility (design @-RK and API)

Check what all might come in trailing of QuickFilters

saurabhdaware · 2025-01-14T06:53:46Z

packages/blade/src/components/ListView/_decisions/decisions.md

+```ts
+type QuickFilter = {
+  title: string;
+  onClick: (e: React.MouseEvent) => void;


+1. Will change

saurabhdaware · 2025-01-14T06:59:41Z

packages/blade/src/components/ListView/_decisions/decisions.md

+<FilterChipGroup>
+  <Dropdown>
+    <FilterChip value={duration} onClearButtonClick={({ value }) => setDuration(undefined)}>
+      Duration
+    </FilterChip>
+    <DropdownOverlay>
+      <ActionList>
+        <ActionListItem
+          title="2 days"
+          value="2d"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 week"
+          value="1w"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 month"


Will check with RK on where we need freeflowing texts + leading / trailing usage on actionlist

saurabhdaware · 2025-01-14T07:16:12Z

packages/blade/src/components/ListView/_decisions/decisions.md

+</Dropdown>
+```
+
+### FilterChipGroup


TODO: make names consistent on figma and dev

chaitanyadeorukhkar · 2025-02-12T11:02:27Z

packages/blade/src/components/ListView/_decisions/decisions.md

+
+#### Props
+
+##### ListView


Weren't we going to make the search optional? Can't see any prop to hide search

chaitanyadeorukhkar · 2025-02-12T11:02:58Z

packages/blade/src/components/ListView/_decisions/decisions.md

+  - If we go with Layout component, then the tradeoff is the educational effort of teaching consumer which part of the UI comes directly from blade as layout component.
+  - If we go without Layout component, tradeoff is not being able to update the layout changes on consumer if something updates in dev.
+
+- ### InputGroup


Isn't this resolved now? We concluded to not do input group right?

chaitanyadeorukhkar · 2025-02-12T11:03:14Z

packages/blade/src/components/ListView/_decisions/decisions.md

+  - FilterView
+  - TableFilterView
+
+- ### Do we want to control layout or not?


This is resolved right?

saurabhdaware added 2 commits December 13, 2024 10:53

feat: add rough api

022c81e

feat: add alternate API

f93842c

saurabhdaware added 12 commits December 27, 2024 15:57

feat: add different types and terminologies of patterns

aaaeed0

docs: add conclusion to pattern scope

acfbf4d

docs: update diagram

62aee9b

docs: fix heading levels

ffc5e4e

docs: add versioning pro for layout components

3d10a39

docs: add all alternative APIs

1d38d4c

Merge branch 'patterns/rfc' of github.com:razorpay/blade into pattern…

2950881

…s/rfc

feat: add search api

3fe6ffa

docs: add apis for subcomponents

0de5bee

docs: fix image widths and info

c5e3e51

docs: add references and open questions

dfdae3a

feat: remove unused image

a4e162d

saurabhdaware marked this pull request as ready for review January 8, 2025 06:20

saurabhdaware requested review from chaitanyadeorukhkar, kamleshchandnani, anuraghazra, snitin315 and tewarig as code owners January 8, 2025 06:20

chaitanyadeorukhkar reviewed Jan 10, 2025

View reviewed changes

anuraghazra reviewed Jan 13, 2025

View reviewed changes

saurabhdaware commented Jan 16, 2025

View reviewed changes

saurabhdaware added 2 commits January 16, 2025 11:02

docs: add tradeoffs

ce2c86a

docs: update QuickFilters API and resolve comments

fc5a6bd

saurabhdaware requested review from chaitanyadeorukhkar and anuraghazra February 12, 2025 10:44

chaitanyadeorukhkar reviewed Feb 12, 2025

View reviewed changes

		- Less verbose compared to API without layout component

		Cons:


		#### Props

		##### ListView

docs(ListView): API Decision #2453

Are you sure you want to change the base?

docs(ListView): API Decision #2453

Conversation

saurabhdaware commented Dec 26, 2024 • edited Loading

Formatted Documents

changeset-bot bot commented Dec 26, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Dec 26, 2024 • edited Loading

codesandbox-ci bot commented Dec 26, 2024 • edited Loading

rzpcibot commented Dec 26, 2024 • edited Loading

Bundle Size Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saurabhdaware Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saurabhdaware left a comment

Choose a reason for hiding this comment

saurabhdaware Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saurabhdaware commented Dec 26, 2024 •

edited

Loading

changeset-bot bot commented Dec 26, 2024 •

edited

Loading

github-actions bot commented Dec 26, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 26, 2024 •

edited

Loading

rzpcibot commented Dec 26, 2024 •

edited

Loading

anuraghazra Jan 13, 2025 •

edited

Loading

saurabhdaware Jan 14, 2025 •

edited

Loading

saurabhdaware Jan 14, 2025 •

edited

Loading